<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('支付宝生活号')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_locations('支付宝生活号', '消息管理', '查看信息')"></div>
		
		<div class="layui-row  yy-margin-top-10">
		
			<fieldset>
				<legend><a>基本信息</a></legend>
			
				<form class="layui-form" action="/message/saveuser" method="post">
				<!-- 查询 -->
					<div class="layui-colla-item">
						<div class="layui-form layui-form-pane">
							<input type="hidden" name="id" th:value="${message.id}">
							
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">消息类型</label>
								<div class="layui-input-inline">
									<input type="radio" name="type" th:disabled="${message.id ne '-1'} ? true" lay-filter="type" title="文本消息" value="1" th:checked="${ (message.type eq '1') or ( message.type ne '1' and message.type ne '2' )}" />
									<input type="radio" name="type" th:disabled="${message.id ne '-1'} ? true" lay-filter="type" title="图文消息" value="2" th:checked="${message.type eq '2'}" />
								</div>
							</div>
							
							<div class="layui-form-item" msgType="1">
								<label class="layui-form-label layui-bg-orange">消息内容</label>
								<div class="layui-input-block">
									<textarea name="content" th:text="${message.content}" autocomplete="off" placeholder="请输入消息内容" class="layui-textarea" lay-verify="required" maxlength="50"></textarea>
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">图文标题</label>
								<div class="layui-input-block">
									<input th:value="${message.title}" name="title" autocomplete="off" class="layui-input" lay-verify="required" maxlength="10" placeholder="请输入图文消息标题">
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">链接地址</label>
								<div class="layui-input-block">
									<input th:value="${message.url}" name="url" autocomplete="off" class="layui-input" maxlength="200" lay-verify="url" placeholder="请输入图文消息链接地址">
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">链接描述</label>
								<div class="layui-input-block">
									<input th:value="${message.actionName}" name="actionName" autocomplete="off" class="layui-input" maxlength="10" placeholder="请输入图文消息链接描述">
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">图文描述</label>
								<div class="layui-input-block">
									<textarea name="desc" th:text="${message.desc}" autocomplete="off" placeholder="请输入图文消息描述" class="layui-textarea" maxlength="50"></textarea>
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">图片</label>
								<div class="layui-input-block">
									<input type="hidden" name="imageUrl" autocomplete="off" th:value="${message.imageUrl}">
									<img style="width: 540px;height: 270px;" th:src="@{${message.imageUrl eq null} ? '/images/default/message_default.png' : ${message.imageUrl}}" id="imageUrl"/>
								</div>
							</div>
							
							<!-- 提交及取消按钮 -->
							<div class="layui-form-item">
								<div class="layui-input-block">
									<a class="layui-btn yy-float-right" href="javascript:history.go(-1);">返回</a>
								</div>
							</div>
						</div>
					</div>
				</form>
			</fieldset>
		</div>
	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>
	
	<script type="text/javascript">
	/*<![CDATA[*/
	//显示文本消息相关输入框
	function showTextMsgInput(){
		//移除掉图片标题文本框的必添属性 
		$("input[name=title]").attr("lay-verify", "");
		//文本消息文本框增加必添属性
		$("textarea[name=content]").attr("lay-verify", "required");
		$("div[msgType=1]").each(function(){
			$(this).show();
		});
		$("div[msgType=2]").each(function(){
			$(this).hide();
		});
	}
	
	//显示图文消息相关输入框
	function showImgMsgInput(){
		//移除掉文本消息文本框的必添属性 
		$.logs.info($("textarea[name=content]"));
		$("textarea[name=content]").attr("lay-verify", "");
		//图文消息标题文本框增加必添属性
		$("input[name=title]").attr("lay-verify", "required");
		$("div[msgType=1]").each(function(){
			$(this).hide();
		});
		$("div[msgType=2]").each(function(){
			$(this).show();
		});
	}
		
	;!function(){
		//默认显示文本消息的内容
		var id = $("input[name=id]").val();
		if(id == -1){//说明是增加，默认显示文本消息内容
			showTextMsgInput();
		} else {//修改
			//1.判断修改的类型是什么，然后判断显示那些内容
			var type = $("input[name=type]:checked").val();
			if(type == 1){
				showTextMsgInput();//文本消息 
			} else {
				showImgMsgInput();//图文消息
			}
		}
		
	}();
	
	/*]]>*/
	</script>
</body>

</html>